<template>
  <div>
    <data-table :head="thead2" :data="tableData2" :page='currentPage' @callback="manipulate2"
                :actions="['edit','view','del']"
                class="intendance-table"></data-table>
    <i class="el-icon-circle-plus-outline add-icon" @click="addbw"></i>
    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                   :current-page.sync="currentPage" layout="total,prev, pager, next, jumper"
                   :total="totalPage" background>
    </el-pagination>
    <el-dialog title="" :visible.sync="bwDetail" width="80%" append-to-body class="dialogDetail" @close="toClose">
      <h2 class="titleblue">{{bwTitle}}</h2>
      <div class="contant">
        <el-row>
          <el-form ref="form" :model="berth">
            <el-col :span="12">
              <div class="grid-content">
                <label class="fl lab-class"><i>*</i>所属码头编号</label>
                <!--dockOptions-->
                <el-select clearable v-model="berth.dock" :disabled='readread' class="select-width-220 fl">
                  <el-option v-for="item in dockOptions" :key="item.value" :label="item.cnNameShort" :value="item.id">
                  </el-option>
                </el-select>
                <!--<el-input v-model="berth.dock" :readonly='readread' class="select-width-220 fl"></el-input>-->
              </div>
            </el-col>
            <el-col :span="12">
              <div class="grid-content">
                <label class="fl lab-class">中文名称全称</label>
                <el-input v-model="berth.cnNameFull" :readonly='readread' class="select-width-220 fl"></el-input>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="grid-content">
                <label class="fl lab-class">中文名称简称</label>
                <el-input v-model="berth.cnNameShort" :readonly='readread' class="select-width-220 fl"></el-input>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="grid-content">
                <label class="fl lab-class">英文名称</label>
                <el-input v-model="berth.enName" :readonly='readread' class="select-width-220 fl"></el-input>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="grid-content">
                <label class="fl lab-class">结构</label>
                <!-- <el-input v-model="berth.jg" :readonly='readread' class="select-width-220 fl"></el-input> -->
                <el-select clearable v-model="berth.structure" :disabled='readread' class="select-width-220 fl">
                  <el-option v-for="item in jgOptions" :key="item.value" :label="item.name" :value="item.id">
                  </el-option>
                </el-select>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="grid-content">
                <label class="fl lab-class">投产日期</label>
                <el-date-picker v-model="berth.productDate" align="right" type="date" placeholder="选择日期"
                                class="select-width-220 fl" :readonly='readread'>
                </el-date-picker>
<!--                <el-input v-model="berth.productDate" :readonly='readread' class="select-width-220 fl"></el-input>-->
              </div>
            </el-col>
            <el-col :span="12">
              <div class="grid-content">
                <label class="fl lab-class">经营模式</label>
                <!-- <el-input v-model="berth.jyms" :readonly='readread' class="select-width-220 fl"></el-input> -->
                <el-select clearable v-model="berth.operationMode" :disabled='readread' class="select-width-220 fl">
                  <el-option v-for="item in jymsOptions" :key="item.value" :label="item.name" :value="item.id">
                  </el-option>
                </el-select>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="grid-content">
                <label class="fl lab-class">业主单位</label>
                <el-input v-model="berth.ownerUnitName" :readonly='readread' class="select-width-220 fl"></el-input>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="grid-content">
                <label class="fl lab-class">联系人</label>
                <el-input v-model="berth.contact" :readonly='readread' class="select-width-220 fl"></el-input>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="grid-content">
                <label class="fl lab-class">联系电话</label>
                <el-input v-model="berth.telephone" :readonly='readread' class="select-width-220 fl"></el-input>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="grid-content">
                <label class="fl lab-class">是否生产用</label>
                <el-radio v-model="berth.productFlag" :disabled='readread' :label="1" class="fl"
                          style="width: 80px;line-height: 40px;">是
                </el-radio>
                <el-radio v-model="berth.productFlag" :disabled='readread' :label="0" class="fl"
                          style="width: 80px;line-height: 40px;">否
                </el-radio>
                <!--<el-input v-model="berth.productFlag" :readonly='readread' class="select-width-220 fl"></el-input>-->
              </div>
            </el-col>
            <el-col :span="12">
              <div class="grid-content">
                <label class="fl lab-class">水工结构等级(吨级)</label>
                <el-input v-model="berth.waterStructure" :readonly='readread' class="select-width-220 fl"></el-input>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="grid-content">
                <label class="fl lab-class">设计靠泊能力(吨级)</label>
                <el-input v-model="berth.designPortAbility" :readonly='readread' class="select-width-220 fl"></el-input>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="grid-content">
                <label class="fl lab-class">核定靠泊能力(吨级)</label>
                <el-input v-model="berth.approvePortAbility" :readonly='readread'
                          class="select-width-220 fl"></el-input>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="grid-content">
                <label class="fl lab-class">前沿停泊水域设计宽度(米)</label>
                <el-input v-model="berth.forePortWidth" :readonly='readread' class="select-width-220 fl"></el-input>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="grid-content">
                <label class="fl lab-class">前沿停泊水域设计深度(米)</label>
                <el-input v-model="berth.forePortDeep" :readonly='readread' class="select-width-220 fl"></el-input>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="grid-content">
                <label class="fl lab-class">设计回旋水域长度(米)</label>
                <el-input v-model="berth.designCycleLength" :readonly='readread' class="select-width-220 fl"></el-input>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="grid-content">
                <label class="fl lab-class">设计回旋水域宽度(米)</label>
                <el-input v-model="berth.designCycleWidth" :readonly='readread' class="select-width-220 fl"></el-input>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="grid-content">
                <label class="fl lab-class">设计回旋水域水深(米)</label>
                <el-input v-model="berth.designCycleDeep" :readonly='readread' class="select-width-220 fl"></el-input>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="grid-content">
                <label class="fl lab-class">泊位长度(米)</label>
                <el-input v-model="berth.berthLength" :readonly='readread' class="select-width-220 fl"></el-input>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="grid-content">
                <label class="fl lab-class">泊位性质</label>
                <el-select clearable v-model="berth.berthType" :disabled='readread' class="select-width-220 fl">
                  <el-option v-for="item in bwOptions" :key="item.value" :label="item.name" :value="item.id">
                  </el-option>
                </el-select>
                <!-- <el-input v-model="berth.bwxz" :readonly='readread' class="select-width-220 fl"></el-input> -->
              </div>
            </el-col>
            <el-col :span="12">
              <div class="grid-content">
                <label class="fl lab-class">主要货种</label>
                <el-input v-model="berth.mainGoodsType" :readonly='readread' class="select-width-220 fl"></el-input>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="grid-content">
                <label class="fl lab-class">固体危货标志</label>
                <el-input v-model="berth.solidDanger" :readonly='readread' class="select-width-220 fl"></el-input>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="grid-content">
                <label class="fl lab-class">液体危货标志</label>
                <el-input v-model="berth.liquipDanger" :readonly='readread' class="select-width-220 fl"></el-input>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="grid-content">
                <label class="fl lab-class">包装危险货物</label>
                <el-input v-model="berth.packageDanger" :readonly='readread' class="select-width-220 fl"></el-input>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="grid-content">
                <label class="fl lab-class line-height-20">设计年通过能力液体危险品、散货、件杂货物（万吨）</label>
                <el-input v-model="berth.designDangerAbility" :readonly='readread'
                          class="select-width-220 fl"></el-input>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="grid-content">
                <label class="fl lab-class line-height-20">设计年通过能力集装箱（万TEU）</label>
                <el-input v-model="berth.designBoxAbility" :readonly='readread' class="select-width-220 fl"></el-input>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="grid-content">
                <label class="fl lab-class">设计通过汽车数量（万标辆）</label>
                <el-input v-model="berth.designVehicleAbility" :readonly='readread'
                          class="select-width-220 fl"></el-input>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="grid-content">
                <label class="fl lab-class">设计通过旅客数量（万人）</label>
                <el-input v-model="berth.designPassengerAbility" :readonly='readread'
                          class="select-width-220 fl"></el-input>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="grid-content">
                <label class="fl lab-class">开放类型</label>
                <el-input v-model="berth.openType" :readonly='readread' class="select-width-220 fl"></el-input>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="grid-content">
                <label class="fl lab-class">开放批准启用机构</label>
                <el-input v-model="berth.agreeOpenOrg" :readonly='readread' class="select-width-220 fl"></el-input>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="grid-content">
                <label class="fl lab-class">开放批准启用文号</label>
                <el-input v-model="berth.agreeOpenDocNo" :readonly='readread' class="select-width-220 fl"></el-input>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="grid-content">
                <label class="fl lab-class">开放批准启用日期</label>
                <el-date-picker v-model="berth.agreeOpenDate" align="right" type="date" placeholder="选择日期"
                                class="select-width-220 fl" :readonly='readread'>
                </el-date-picker>
<!--                <el-input v-model="berth.agreeOpenDate" :readonly='readread' class="select-width-220 fl"></el-input>-->
              </div>
            </el-col>

            <el-col :span="12">
              <div class="grid-content">
                <label class="fl lab-class">备注</label>
                <el-input v-model="berth.remark" :readonly='readread' class="select-width-220 fl"></el-input>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="grid-content">
                <label class="fl lab-class"><i>*</i>所属机构</label>
                <el-select v-model="berth.belongTo" placeholder="海事处" :disabled='readread' class="select-width-220 fl">
                  <el-option v-for="item in organization" :key="item.value" :label="item.name" :value="item.id">
                  </el-option>
                </el-select>
              </div>
            </el-col>
          </el-form>

        </el-row>
        <el-row :gutter="24" class="footerbtn" v-if="bwbtn">
          <el-button class="sure" @click="bwSurebtn">确定</el-button>
          <el-button class="cancel" @click="toClose">取消</el-button>
        </el-row>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import dictService from '@/services/DictionaryService.js'
  import * as orgService from '@/services/OrganizationService'
  import * as crewsService from '@/services/CrewsService.js'
  import * as portRegShipsService from '@/services/PortRegShipsService.js'
  import * as berthsService from '@/services/BerthsService.js'
  import * as dockService from '@/services/DockService.js'
  import * as transCompaniesService from '@/services/TransCompaniesService.js'
  import DataTable from '@/components/common/DataTable.vue'
  import moment from 'moment'

  export default {
    props: ['organization', 'jgOptions', 'jymsOptions', 'bwOptions', 'dockOptions'],
    components: {
      'data-table': DataTable
    },
    name: 'Berth',
    data: function () {
      return {
        activeName: '1',
        totalPage: 1,
        currentPage: 1,
        berth: {
          dock: '',
          packageDanger: '',
          cnNameShort: '',
          structure: '',
          operationMode: '',
          contact: '',
          productFlag: '',
          designPortAbility: '',
          forePortWidth: '',
          designCycleLength: '',
          designCycleDeep: '',
          berthType: '',
          solidDanger: '',
          designBoxAbility: '',
          designPassengerAbility: '',
          agreeOpenOrg: '',
          agreeOpenDate: '',
          belongTo: '',
          cnNameFull: '',
          enName: '',
          productDate: '',
          ownerUnitName: '',
          telephone: '',
          waterStructure: '',
          approvePortAbility: '',
          forePortDeep: '',
          designCycleWidth: '',
          berthLength: '',
          mainGoodsType: '',
          liquipDanger: '',
          designDangerAbility: '',
          designVehicleAbility: '',
          openType: '',
          agreeOpenDocNo: '',
          remark: ''
        },
        thead2: [
          {
            name: '中文名称全称',
            prop: 'cnNameFull'
          },
          {
            name: '结构',
            prop: 'structure'
          },
          {
            name: '经营模式',
            prop: 'operationMode'
          },
          {
            name: '业主单位名称',
            prop: 'ownerUnitName'
          },
          {
            name: '泊位性质',
            prop: 'berthType'
          },
          {
            name: '泊位长度(米)',
            prop: 'berthLength'
          },
          {
            name: '包装危险货物',
            prop: 'packageDanger'
          }
        ],
        tableData2: [],
        bwDetail: false,
        name: '111',
        bwTitle: '添加泊位',
        readread: false,
        shipId: '',
        mtId: '',
        hyId: '',
        bwId: '',
        cjgId: '',
        bwbtn: true,
        detailId: null,
        createTime: null
      }
    },
    mounted () {
      this.getData(0)
    },
    methods: {
      toClose () {
        this.bwDetail = false
        // this.berth = {}
        this.readread = false
      },
      handleQuery (param) {
        var query = ''
        if (param.structure) {
          query += 'structure==' + param.structure
        }
        if (param.operationMode) {
          if (query.length) {
            query += ';'
          }
          query += 'operationMode==' + param.operationMode
        }
        if (param.berthType) {
          if (query.length) {
            query += ';'
          }
          query += 'berthType==' + param.berthType
        }
        return query
      },
      async search (param) {
        this.currentPage = param.currentPage
        let query = await this.handleQuery(param)
        this.getData(param.currentPage - 1, query)
      },
      bwSurebtn () {
        if (!this.berth.dock) {
          this.$alert('请输入所属码头编号')
          return false
        }
        if (!this.berth.belongTo) {
          this.$alert('请选择所属机构')
          return false
        }
        let obj = {
          dock: {id: this.berth.dock},
          packageDanger: this.berth.packageDanger,
          cnNameShort: this.berth.cnNameShort,
          structure: this.berth.structure,
          operationMode: this.berth.operationMode,
          contact: this.berth.contact,
          productFlag: this.berth.productFlag == 1 ? true : false,
          designPortAbility: this.berth.designPortAbility,
          forePortWidth: this.berth.forePortWidth,
          designCycleLength: this.berth.designCycleLength,
          designCycleDeep: this.berth.designCycleDeep,
          berthType: this.berth.berthType,
          solidDanger: this.berth.solidDanger,
          designBoxAbility: this.berth.designBoxAbility,
          designPassengerAbility: this.berth.designPassengerAbility,
          agreeOpenOrg: this.berth.agreeOpenOrg,
          agreeOpenDate: this.$m(this.berth.agreeOpenDate).toISOString(),
          productDate: this.$m(this.berth.productDate).toISOString(),
          // organiza: {id: this.berth.belongTo},
          belongTo: this.berth.belongTo,
          cnNameFull: this.berth.cnNameFull,
          enName: this.berth.enName,
          ownerUnitName: this.berth.ownerUnitName,
          telephone: this.berth.telephone,
          waterStructure: this.berth.waterStructure,
          approvePortAbility: this.berth.approvePortAbility,
          forePortDeep: this.berth.forePortDeep,
          designCycleWidth: this.berth.designCycleWidth,
          berthLength: this.berth.berthLength,
          mainGoodsType: this.berth.mainGoodsType,
          liquipDanger: this.berth.liquipDanger,
          designDangerAbility: this.berth.designDangerAbility,
          designVehicleAbility: this.berth.designVehicleAbility,
          openType: this.berth.openType,
          agreeOpenDocNo: this.berth.agreeOpenDocNo,
          remark: this.berth.remark
        }
        if (this.bwTitle == '编辑泊位') {
          obj.id = this.detailId
          obj.createTime = this.createTime
          berthsService.update(obj).then(res => {
            if (res) {
              this.bwDetail = false
              this.getData(0)
              this.$message({
                type: 'success',
                message: '修改成功!'
              })
            }
          })
        } else {
          berthsService.create(obj).then(res => {
            if (res) {
              this.bwDetail = false
              this.getData(0)
              this.$message({
                type: 'success',
                message: '创建成功!'
              })
            }
          })
        }
      },
      getData (num, query = '') {
        berthsService.search(num, query).then(async res => {
          let arr = []
          this.totalPage = parseInt(res.headers['x-total-count'])
          await res.data.forEach(item => {
            if (item.structure) {
              this.jgOptions.forEach(value => {
                if (value.id == item.structure) {
                  item.structure = value.name
                }
              })
            }
            if (item.operationMode) {
              this.jymsOptions.forEach(value => {
                if (value.id == item.operationMode) {
                  item.operationMode = value.name
                }
              })
            }
            if (item.berthType) {
              this.bwOptions.forEach(value => {
                if (value.id == item.berthType) {
                  item.berthType = value.name
                }
              })
            }
            arr.push(item)
          })
          this.tableData2 = arr
        })
      },
      addbw () {
        this.bwId = ''
        this.bwDetail = true
        this.readread = false
        this.bwTitle = '添加泊位'
        this.bwbtn = true
      },
      showDetail (data) {
        for (let key in data) {
          if (key == 'id') {
            this.detailId = data[key]
          } else if (key == 'createTime') {
            this.createTime = data[key]
          } else if (key == 'dock' && data[key]) {
            this.dockOptions.forEach(item => {
              if (data[key].cnNameShort == item.cnNameShort) {
                this.berth[key] = item.id
              }
            })
          } else if (key == 'structure' && data[key]) {
            this.jgOptions.forEach(item => {
              if (data[key] == item.name) {
                this.berth[key] = item.id
              }
            })
          } else if (key == 'productFlag') {
            if (data[key] == true) {
              this.berth[key] = 1
            } else if (data[key] == false) {
              this.berth[key] = 0
            }
          } else if (key == 'operationMode' && data[key]) {
            this.jymsOptions.forEach(item => {
              if (data[key] == item.name) {
                this.berth[key] = item.id
              }
            })
          } else if (key == 'berthType' && data[key]) {
            this.bwOptions.forEach(item => {
              if (data[key] == item.name) {
                this.berth[key] = item.id
              }
            })
          } else if (key == 'agreeOpenDate' || key == 'productDate' && data[key]) {
            this.berth[key] = this.$m(data[key]).format('YYYY-MM-DD HH:mm:ss')
          } else {
            this.berth[key] = data[key]
          }
        }
      },
      manipulate2 (param) {
        if (param.action == 'view') {
          this.bwDetail = true
          this.bwbtn = false
          this.readread = true
          this.bwTitle = '泊位详情'
          this.showDetail(param.data)
        } else if (param.action == 'edit') {
          this.bwDetail = true
          this.bwbtn = true
          this.readread = false
          this.bwTitle = '编辑泊位'
          this.showDetail(param.data)
        } else if (param.action == 'del') {
          berthsService.deleteById(param.data.id).then(res => {
            this.getData(0)
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
          })
        }
      },
      handleSizeChange (val) {
        this.$emit('update', val)
        this.getData(val - 1)
      },
      handleCurrentChange (val) {
        this.$emit('update', val)
        this.getData(val - 1)
        // this.$emit('update:currentPage', val)
      }
    }
  }
</script>
